<template>
  <view class="page-continer page-voice-chat" style="background-color: #000">
    <view class="voice-user-img">
      <view>
        <img
          class="chat-user-head-img"
          :src="useAgentStore.agentInfo.avatarUrl"
          alt=""
        />
      </view>
      <view
        class="chat-saying replay-animation fade"
        :class="{ show: recorderStatus == 3 }"
      >
        <recordUi />
      </view>
      <view
        class="chat-saying replay-animation fade"
        :class="{ show: recorderStatus == 2 }"
      >
        我正在思考 请稍等
      </view>
    </view>
    <scroll-view
      scroll-with-animation
      scroll-y
      :scroll-top="100000"
      :scroll-into-view="msgItem"
      class="chat-msg-box"
      id="chatmsgBox"
    >
      <div
        class="chat-msg-item"
        :class="{
          'client-msg': item.roleType == 'ASSISTANT',
          'myself-msg': item.roleType == 'HUMAN',
        }"
        v-for="(item, index) in session.messages"
        :id="`item-${item.id || item.date}`"
        :key="index"
      >
        <view class="text-msg">
          <span>{{ item.content }}</span>
        </view>
      </div>

      <!-- 智能体流式回复的文字 -->
      <!-- class="client-msg chat-msg-item"
      v-show="useChatStore.clientReplayText != ''"
      <view class="text-msg">
          {{ useChatStore.clientReplayText }}
        </view> -->
      <view
        class="client-msg chat-msg-item"
        v-show="clientReplayText != ''"
        :id="'item-clientReplayText' + clientReplayText.length"
      >
      </view>
      <!-- 用户流式输入的文字 -->
      <view
        class="myself-msg chat-msg-item"
        :id="'item-userInputText' + userInputText.length"
        v-show="userInputText != ''"
      >
        <view class="text-msg">
          {{ userInputText }}
        </view>
      </view>
      <!--默认底部view-->
      <view :id="msgItem" style="height: 1rpx; margin: 0"></view>
    </scroll-view>

    <view class="voice-chat-handle">
      <view
        class="voice-chat-handle-box"
        :class="{ isCloseMic: isCloseMic == true }"
        @click="onToggleMic"
      >
        <view v-show="!isCloseMic">
          <up-icon name="mic" color="#fff" size="28"></up-icon>
        </view>
        <view v-show="isCloseMic">
          <up-icon name="mic-off" color="#ff0000" size="28"></up-icon>
        </view>
      </view>
      <view class="mic-handle-box">
        <view
          class="fade"
          :class="{
            show:
              !isCloseMic &&
              (recorderStatus == 1 ||
                useLoginStore.userDeviceSystem == 'android'),
          }"
        >
          <recordUi />
          <span class="voice-status-text">正在听...</span>
        </view>
        <view class="fade mic-close-txt" :class="{ show: isCloseMic }"
          >您已静音</view
        >
      </view>
      <view
        class="voice-chat-handle-box voice-chat-handle-close"
        @click="onBack"
      >
        <up-icon name="close" color="#fff" size="28"></up-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
import { watch, ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import recordUi from "@/pages/index/coms/recordUi.vue";
import { storeToRefs } from "pinia";
import useChat from "@/store/useChat.js";
const useChatStore = useChat();
import useVoice from "@/store/useVoice.js";
const useVoiceStore = useVoice();
import useAgent from "@/store/useAgent.js";
const useAgentStore = useAgent();
import useLogin from "@/store/useLogin.js";
import useWs from "@/store/useWs.js";
const useWsStore = useWs();
const useLoginStore = useLogin();

const msgItem = ref("");

const { recorderStatus, isCloseMic } = storeToRefs(useVoiceStore);
const { userInputText, clientReplayText, session } = storeToRefs(useChatStore);
onLoad(() => {
  msgItem.value = `bottom-msg-box`;
  useVoiceStore.chatType = 2; //暂存聊天类型
  useWsStore.onWsOpen();
});
//页面销毁时重置一些
onUnload(() => {
  useWsStore.onCloseVoiceChat();
});

const onToggleMic = () => {
  useVoiceStore.toggleMic();
};

watch(clientReplayText, (newVal) => {
  //0的话 流式输出的文字在列表里会被挡住
  if (newVal.length == 0) return;
  nextTick(() => {
    msgItem.value = `item-clientReplayText${newVal.length}`;
  });
});
//监听流式输入的文字变化 拉到最下边
watch(
  userInputText,
  (newVal) => {
    console.log("用户输入了文字");
    //0的话 流式输出的文字在列表里会被挡住
    if (newVal.length == 0) {
      console.log("asr输入完毕");
      return;
    }
    nextTick(() => {
      msgItem.value = `item-userInputText${newVal.length}`;
    });
  },
  { deep: true }
);

const onBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss"></style>
